<template>
	<view class="container">
		<div class="l-box flex-center">
			<view class="d-box flex-column" v-for="(item, i) in topData" :key="i" :class="{ line: i + 1 != topData.length }" @click="itemHandle(item)">
				<text class="num">{{ item.value }}</text>
				<text class="title">{{ item.title }}</text>
				<text class="sub">{{ item.sub }}</text>
			</view>
		</div>
		<view class="ring-box">
			<view class="ring"><qiun-data-charts ref="ring" v-if="ringData.series[0].data.length" type="ring" :opts="ring.opts" :chartData="ringData" /></view>
			<view class="tip">整个团队机具数量统计</view>
		</view>
		<view class="e-content">
			<view class="filter flex-space-between">
				<view class="brand">机具激活趋势图</view>
				<view class="type">
					<u-tabs active-color="#4286F5" :list="echartNavType" :is-scroll="false" bg-color="transparent" :current="navIndex1" @change="changeNav($event, 1)"></u-tabs>
					<!-- <text v-for="(item, i) in echartNavType" :key="i" class="">{{item.text}}</text> -->
				</view>
			</view>
			<view class="echart">
				<qiun-data-charts v-if="line1Data.series[0].data.length > 0" :opts="line.opts" type="area" :chartData="line1Data" />
				<div class="timeType flex-center">
					<text v-for="(item, i) in timeType" :key="i" @click.stop="timeChange(1, item, i)" :class="{ active: timeActive1 == i }">{{ item.name }}</text>
				</div>
			</view>
		</view>
		<view class="e-content">
			<view class="filter flex-space-between">
				<view class="brand">新增达标趋势图</view>
				<view class="type">
					<u-tabs active-color="#4286F5" :list="echartNavType" :is-scroll="false" bg-color="transparent" :current="navIndex2" @change="changeNav($event, 2)"></u-tabs>
					<!-- <text v-for="(item, i) in echartNavType" :key="i" class="">{{item.text}}</text> -->
				</view>
			</view>
			<view class="echart">
				<qiun-data-charts v-if="line2Data.series[0].data.length > 0" :opts="line.opts" type="area" :chartData="line2Data" />
				<div class="timeType flex-center">
					<text v-for="(item, i) in timeType" :key="i" @click.stop="timeChange(2, item, i)" :class="{ active: timeActive2 == i }">{{ item.name }}</text>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
import { totalTermIndex, termActiveDetail, termStandardDetail } from '_a/data/term';

export default {
	data() {
		return {
			topData: [
				{
					title: '本月激活机具',
					value: 0,
					sub: '（本人）',
					key: 'activeTermCountByOneSelf'
				},
				{
					title: '本月激活机具',
					value: 0,
					sub: '（直属团队机具激活之和）',
					key: 'activeTermCountByTeam'
				},
				{
					title: '累计激活数(台)',
					value: 0,
					sub: '   ',
					key: 'totalActiveTermCountByTeam'
				}
			],
			echartNavType: [{ name: '直属团队', value: '0' }, { name: '团队', value: '1' }, { name: '本人', value: '2' }],
			timeType: [{ name: '按日', value: '0' }, { name: '按月', value: '1' }, { name: '近一周', value: '2' }],
			query: {
				policyCode: ''
			},
			line: {
				opts: {
					color: ['#1890FF'],
					dataPointShapeType: 'hollow',
					legend: {
						show: false
					},
					xAxis: {
						labelCount: 8
					},
					fontSize: '12',
					yAxis: {
						gridType: 'dash',
						dashLength: 2
					},

					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true
						}
					}
				}
			},
			line1Data: {
				categories: [],
				series: [
					{
						name: '数量',
						data: []
					}
				]
			},
			line2Data: {
				categories: [],
				series: [
					{
						name: '数量',
						data: []
					}
				]
			},
			ring: {
				opts: {
					dataLabel: false,
					enableScroll: true,
					extra: {
						ring: {
							border: false,
							linearType: 'custom',
							ringWidth: 20
						}
					},
					title: {
						name: '机具数量（台）',
						fontSize: 12,
						color: '#666666'
					},
					subtitle: {
						name: '0',
						fontSize: 18,
						color: '#211F1F'
					},
					color: ['#0569FF', '#FFD800', '#FF8F17']
				}
			},
			ringData: {
				series: [
					{
						data: []
					}
				]
			},
			navIndex1: 0,
			navIndex2: 0,
			timeActive1: 0, //时间下标
			timeActive2: 0 //时间下标
		};
	},
	async onPullDownRefresh() {
		this.$store.dispatch('getUserDetail').then(async res => {
			uni.stopPullDownRefresh();
			await this.initData();
			this.$tip.toast('刷新成功!', 'success', 500);
		});
	},
	onLoad() {
		this.initData();
	},
	methods: {
		async initData() {
			this.ringData.series[0].data = [];
			this.line1Data.series[0].data = [];
			this.line2Data.series[0].data = [];
			await this.getEchartData1();
			await this.getEchartData2();
			await this.getTotal();
		},
		// 获取数据
		getTotal() {
			// 本人
			totalTermIndex({
				policyCode: this.query.policyCode
			}).then(res => {
				if (res.code == 200) {
					let data = res.data;
					// 头部上的数据
					this.topData = this.formData(this.topData, data);
					// 环图数据
					let list = [
						{ name: '已绑定', value: 0, key: 'totalBindTermCountByTeam' },
						{ name: '未绑定', value: 0, key: 'totalUnBindTermCountByTeam' }
						// { name: '可下发', value: 0, key: 'totalCanAssignTermCountByOneSelf' }
					];
					this.ringData.series[0].data = this.formData(list, data);
					this.ring.opts.subtitle.name = res.data.totalAllTermCountByTeam;
					this.ringData.series[0].data = list.map(item => {
						item.name = item.name + '(' + data[item.key] + '台' + ')';
						item.value = data[item.key];
						return item;
					});
					// console.log(this.ringData.series[0].data);
				}
			});
		},
		// 格式化请求赋值参数
		formData(list, data) {
			list = list.map(subItem => {
				subItem.value = data[subItem.key];
				return subItem;
			});
			return list;
		},
		getEchartData1() {
			termActiveDetail({
				agentType: this.echartNavType[this.navIndex1].value,
				queryDateType: this.timeType[this.timeActive1].value,
				policyCode: this.query.policyCode
			}).then(res => {
				if (res.code == 200) {
					let line = res.data;
					this.line1Data.categories = line.map(item => {
						item = item.date.slice(-2);
						return item;
					});
					// console.log(this.line1Data);
					this.line1Data.series[0].data = line.map(item => item.count);
				}
			});
		},
		getEchartData2() {
			termStandardDetail({
				agentType: this.echartNavType[this.navIndex2].value,
				queryDateType: this.timeType[this.timeActive2].value,
				policyCode: this.query.policyCode
			}).then(res => {
				if (res.code == 200) {
					let line = res.data;
					this.line2Data.categories = line.map(item => {
						item = item.date.slice(-2);
						return item;
					});
					// console.log(this.line2Data);
					this.line2Data.series[0].data = line.map(item => item.count);
				}
			});
		},
		changeNav(i, type) {
			// console.log(type, i);
			switch (type) {
				case 1:
					this.navIndex1 = i;
					this.getEchartData1();
					break;
				case 2:
					this.navIndex2 = i;
					this.getEchartData2();
					break;
				default:
					break;
			}
		},
		timeChange(key, item, i) {
			switch (key) {
				case 1:
					this.timeActive1 = i;
					this.getEchartData1();
					break;
				case 2:
					this.timeActive2 = i;
					this.getEchartData1();
					break;
				default:
					break;
			}
		}
	}
};
</script>

<style lang="scss">
.container {
	padding-bottom: R(50);
}
.l-box {
	margin-bottom: R(26);
	justify-content: space-between;
	background: #4286f5;
	margin: R(30) R(25) R(20);
	box-shadow: 0px R(5) R(21) R(3) rgba(13, 133, 244, 0.14);
	border-radius: R(10);
	height: R(220);
	color: #fff;
	text-align: center;
	.d-box {
		width: 33%;
		text-align: center;
	}
	.num {
		font-size: R(36px);
		font-family: Source Han Sans CN;
		// font-weight: bold;
		margin-bottom: R(30);
	}
	.title {
		font-size: R(20px);
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-top: auto;
		white-space: nowrap;
	}
	.sub {
		@extend .title;
		height: R(30);
	}
	.line {
		position: relative;
	}
	.line::after {
		content: '';
		position: absolute;
		background: #eee;
		width: 1px;
		height: R(26);
		right: 0;
		top: R(40);
	}
}
.ring-box {
	padding: R(6) R(20) 0;
	margin: R(0) R(25) 0;
	height: R(454px);
	background: #ffffff;
	box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
	border-radius: R(20px);
	.ring {
		height: 80%;
	}
	.tip {
		font-size: R(24);
		font-weight: 300;
		color: #8c8c8c;
		padding-left: R(134);
	}
}
.e-content {
	padding: R(6) R(25) 0;
	margin: R(20) R(25) 0;
	height: R(591px);
	background: #ffffff;
	box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
	border-radius: R(20px);
	.filter {
		font-size: R(28px);
		font-weight: 400;
		color: #000000;
		margin-bottom: R(20);
		.type {
			width: R(400);
		}
	}
	.echart {
		width: 100%;
		height: 190px;
	}
	.timeType {
		margin-top: R(20);
		text:nth-child(2) {
			margin: 0 R(16) 0 R(16);
		}
		text {
			width: R(147);
			height: R(60);
			line-height: R(60);
			text-align: center;
			background: #fafafa;
			border-radius: R(30);
		}
		.active {
			background: #cee1ff;
			color: #4286f5;
		}
	}
}
</style>
